{[ template "__start__.html" . ]}
<body>
<div id="app">
    {[ template "__header__.html" . ]}
    <div class="container-fluid">
        <div class="row">
            {[ template "__menu__.html" . ]}
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div style="margin-top: 16px; ">

                    <div class="row">
                        <div class="col">
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">用户ID查询</span>
                                <input type="text" v-model="query_user_id" class="form-control" placeholder="" aria-label="basic-addon1" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon2">昵称查询</span>
                                <input type="text" v-model="query_nick_name" class="form-control" placeholder="" aria-label="basic-addon2" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-primary" @click="query()">搜索</button>
                        </div>
                    </div>

                    <div class="box" style="border: 1px solid #D3D3D3;margin-bottom: 16px;">
                        <table class="table table-hover">
                            <thead style="z-index: 99;">
                                <tr>
                                    <th scope="col">用户id</th>
                                    <th scope="col">头像</th>
                                    <th scope="col">昵称</th>
                                    <th scope="col">注册时间</th>
                                    <th scope="col">账号</th>
                                    <th scope="col">是否是VIP</th>
<!--                                    <th scope="col">是否在线(TODO)</th>-->
                                    <th scope="col">游戏详情</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="item in list">
                                    <tr style="font-size: 11px;">
                                        <td>{{ item.user_id }}</td>
                                        <td> <img :src="item.avatar" style="width: 32px;height: 32px; border-radius:50%;" /></td>
                                        <td>{{ item.nick_name }}</td>
                                        <td>{{ item.created_at }}</td>
                                        <td>{{ item.account }}</td>
                                        <td>
                                            <template v-if="item.is_vip === 1">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" @click="delVIP(item.user_id)"  style="width: 56px;height: 24px;" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" @click="setVIP(item.user_id)" style="width: 56px;height: 24px;" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                                </div>
                                            </template>

                                        </td>
<!--                                        <td>{{ item.online }}</td>-->
                                        <td><a class="btn btn-link" @click="userGameItem(item.user_id)"> {{ item.game_count }} 局 (点击查看详情) </a></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col align-self-start"></div>
                        <div class="btn-group col align-self-center" style="width: 30%;" role="group" aria-label="First group">
                            <a type="button" class="btn btn-primary" @click="goto(1)">首页</a>
                            <template v-for="item in page_list">
                                <a v-if="item.action === 1" type="button" class="btn btn-secondary" @click="goto(item.pg)">{{ item.pg }}</a>
                                <a v-else type="button" class="btn btn-primary" @click="goto(item.pg)">{{ item.pg }}</a>
                            </template>
                        </div>
                        <div class="col align-self-end"></div>
                    </div>
                </div>

                <!-- 游戏对局 -->
                <div class="modal modal-xl fade" id="gameModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5">游戏对局</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div style="height: 520px; overflow: auto;">
                                    <table class="table table-hover">
                                        <thead style="z-index: 99;">
                                        <tr>
                                            <th scope="col">游戏对局ID</th>
                                            <th scope="col">轮数</th>
                                            <th scope="col">时间</th>
                                            <th scope="col">结果</th>
                                            <th scope="col">庄闲</th>
                                            <th scope="col">输赢分数</th>
                                            <th scope="col">基数</th>
                                            <th scope="col">倍数</th>
                                            <th scope="col">累计输赢</th>
                                            <th scope="col">我的牌</th>
                                            <th scope="col">对手用户</th>
                                            <th scope="col">对手的牌</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <template v-for="item in user_game_list">
                                            <tr style="font-size: 11px;">
                                                <td>{{ item.game_id }}</td>
                                                <td>{{ item.item_id }}</td>
                                                <td>{{ item.created_at }}</td>
                                                <td>{{ item.vs_msg }}</td>
                                                <td>{{ item.vocation }}</td>
                                                <td>{{ item.score }}</td>
                                                <td>{{ item.balance }}</td>
                                                <td>{{ item.multiple }}</td>
                                                <td>{{ item.all_score }}</td>
                                                <td>{{ item.poker }}</td>
                                                <td>{{ item.rival_id }}</td>
                                                <td>{{ item.rival_poker }}</td>
                                            </tr>
                                        </template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                            </div>
                        </div>
                    </div>
                </div>

                {[ template "__toast__.html" . ]}
            </main>
        </div>
    </div>
</div>
</body>
{[ template "__js__.html" . ]}
<script>
    const { createApp, ref } = Vue;
    const common = new Utils;
    const app = createApp({
        data() {
            return {
                list: [],
                page: 1,
                limit: 10,
                total: 0,
                user_game_list:[],
                page_list: [],
                query_user_id: "",
                query_nick_name: "",
            }
        },
        created:function(){
            let t = this;
            t.getList();
        },
        destroyed:function () {
        },
        methods: {
            getList: function () {
                let t = this;
                let apiUrl = "/admin/user/list?page="+t.page+"&limit="+t.limit+"&user_id="+t.query_user_id+"&nick_name="+t.query_nick_name;
                common.AjaxGet(apiUrl, function (resp) {
                    console.log(resp);
                    t.list = resp.data.list;
                });
                t.pageList();
            },

            goto: function (pg) {
                let t = this;
                t.page = pg;
                t.getList();
            },

            userGameItem: function (userId) {
                let t = this;
                common.AjaxGetNotAsync("/admin/user/game/list?user_id="+userId, function (resp){
                    console.log(resp);
                    t.user_game_list = resp.data;
                });
                $("#gameModal").modal("show");
            },

            pageList: function () {
                let t = this;
                t.page_list = [];
                if(t.page<4) {
                    for (let i=1; i<6; i++) {
                        let data = {pg : i, action: 0}
                        if (t.page === i) {
                            data.action = 1;
                        }
                        t.page_list.push(data);
                    }
                }
                if(t.page>=4) {
                    for (let i=t.page-3; i<t.page+3; i++) {
                        let data = {pg : i, action: 0}
                        if (t.page === i) {
                            data.action = 1;
                        }
                        t.page_list.push(data);
                    }
                }
            },

            query: function () {
                let t = this;
                t.getList();
            },

            setVIP: function (uid) {
                let t = this;
                common.AjaxGetNotAsync("/admin/vip/set?user_id="+uid, function (resp){
                    if (resp.msg === "ok") {
                        common.ToastShow("修改成功!")
                    } else {
                        common.ToastShow("修改失败!")
                    }
                });
            },

            delVIP: function (uid) {
                let t = this;
                common.AjaxGetNotAsync("/admin/vip/del?user_id="+uid, function (resp){
                    if (resp.msg === "ok") {
                        common.ToastShow("修改成功!")
                    } else {
                        common.ToastShow("修改失败!")
                    }
                });
            },

        },
        computed: {
        },
        mounted:function(){
        },
    });
    app.mount('#app');
</script>
{[ template "__end__.html" . ]}